<template>
	<view class="page">
		<image class="iwidth" :src="imgPath+'/static/big/square/dbj.png'" mode="widthFix"></image>
		<!-- <view class="back_btn" @click="rightClick"></view> -->
		<view class="go_btn" @click="goPh"></view>
		<image class="showPh" :src="imgPath+'/static/big/square/showHd.png'" mode="widthFix"></image>
		<image class="goGc" :src="imgPath+'/static/big/square/fhgc.png'" mode="widthFix" @click="goGc"></image>
		<view class="tdName">{{mbtiTeam.teamName}}</view>
		<view class="tdJd">{{bl+'%'}}</view>
		<view class="tdDz">{{mbtiTeam.voteNumber}}</view>
		<view class="tdPm">{{mbtiTeam.ranking}}</view>
		<view class="square">
			<view class="top-box">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="goBottom" :lower-threshold="60">
					<view class="top-content">
						<view class="item-top" v-for="(v,i) in mbtiTeam.members" :key="v.userId" :style="{'padding-left': mbtiTeam.members.length == 9 && i == 0 ?'70rpx' : '0'}">
							<view style="display: flex;justify-content: center;">
								<view v-if="v.isCaptain == 1" class="item-tag">队长</view>
								<view class="item-tag1">{{v.mbti}}</view>
							</view>
							<image class="pImage" :src="v.avatar" mode="widthFix"></image>
							<view class="item-name">{{v.nickname}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottom-box">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="goBottom" :lower-threshold="60">
					<view class="item-bottom" v-for="(v,i) in kjDetail" :key="i">
						<view class="item-name">{{v.teamName}}</view>
						<view class="item-time">{{v.createTime}}</view>
						<view class="item-msg">{{v.title}}</view>
						<!-- <view class="item-video" v-if="i == 0">
							<image class="my-video" :src="v.files[0]" mode="aspectFill" @click="preImage([v.files[0]])"></image>
						</view> -->
						<view style="display: flex;flex-wrap: wrap" v-if="v.files && getType(v.taskKey) == 1">
							<image v-for="s in v.files" :key="s" class="pImage" :src="s" mode="aspectFill" @click="preImage(v.files)"></image>
						</view>
						<view class="item-video" v-if="v.files && getType(v.taskKey) == 2">
							<video class="my-video" id="myVideo" :src="v.files[0]"
							@error="videoErrorCallback" @play="playing" :poster="v.files[0]+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_328,h_305'" controls></video>
					 </view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="isShare">
			<image class="dz" v-for="v in votes" :key="v.userId" :src="imgPath+'/static/big/square/sdz1.png'" mode="widthFix" @click="dz"></image>
			<image class="dz" v-for="(v,i) in 3-votes.length" :key="i" :src="imgPath+'/static/big/square/sdz.png'" mode="widthFix" @click="dz"></image>
		</view>
			<view v-if="!isShare">
			<view class="dzTxt">为TA们点赞</view>
			<image class="dz" v-if="isVotePt" :src="imgPath+'/static/big/square/sdz1.png'" mode="widthFix" ></image>
			<image class="dz" v-else :src="imgPath+'/static/big/square/sdz.png'" mode="widthFix" @click="dz" ></image>
		</view>
		<image class="dzBox" :src="imgPath+'/static/big/square/sdzbox.png'" mode="widthFix" v-if="isShare" @click="dz"></image>
		<image class="dzBox" v-if="!isShare" :src="imgPath+'/static/big/square/sdzbox1.png'" mode="widthFix" @click="dz"></image>
		<u-popup v-model="dzShow"  mode="center">
			<view style="position: relative;">
				<!-- <image class="dzImage" mode="widthFix" v-if="!isNo" :src="imgPath+'/static/big/square/dright.png'"></image> -->
				<image class="dzImage" v-if="isNo" mode="widthFix" :src="imgPath+'/static/big/square/dfail.png'"></image>
			</view>
		</u-popup>
		<u-modal v-model="csShow" title="提示" :content="mbtiStatus == 0 ?'请先完成测试':'请先确认人格'" @confirm="confirm" ref="uModal">
		</u-modal>
		<!--生成海报后的图  -->
		<view class="canvas-box" style="opacity: 0;height: 0;overflow: hidden;">
			<canvas canvas-id="mycanvas" style="width: 576rpx;height: 1105rpx;position:absolute;left:-1000rpx;" />
		</view>
		<BgMusic ref="bgMusic"/>
		<ActivityEnd ref="activityEnd"/>
	</view>
</template>

<script>
	import platform from "@/src/platform";
	import http from "@/src/http";
	export default {
		data() {
			return {
				userBool:false,
				current: 0,
				list: [1,2,3,4,5,6,7],
				dzShow: false,
				mbtiTeam: {},
				kjDetail: [
					{
						title: '',
						describe: '',
						teamName: '',
						createTime: '',
						files: []
					}
				],
				bl: 0,
				isMate: 1,
				isVote: false,
				votes: [1],
				isNo: false,
				taskKey: '',
				teamId: '',
				isShare: false,
				canDz: false,
				stage: 0,
				mbtiStatus: '',
				csShow: false,
				isVotePt: false
			}
		},
		onLoad(option) {
			console.log(option)
			if (option && option.taskKey) {
				this.teamId = Number(option.teamId)
				this.taskKey = option.taskKey
				this.isShare = true
				this.getDz()
			} else {
				this.getDz()
				this.teamId = Number(option.teamId)
				this.isShare = false
			}
			this.getTeamList()
			this.loadData()
			this.getKj()
		},
		methods: {
			getDz () {
				http.taskWork20Detail({teamId: this.teamId}).then((res) => {
					if (res.status == 0) {
						this.isMate = res.data.isMate
						this.isVote = res.data.isVote
						this.votes = res.data.votes
					}
				})
			},
			dz () {
				if (this.isShare) {
					if (this.isMate == 0) {
						this.dzShow = true
						this.isNo = true
						return
					} else {
						this.isNo = false
					}
					http.submitTask({targetTeamId: this.teamId, taskKey: this.taskKey}).then((res) => {
						if (res.status == 0) {
							// this.dzShow = true
							// this.isNo = false
							this.$u.toast('感谢你的点赞')
							this.getDz()
						} else {
							this.$u.toast(res.message)
						}
					})
				} else {
					const params = {
						teamId: this.teamId
					}
					http.vote(params).then(res=>{
						if (res.status == 0) {
							this.$u.toast('感谢你的点赞')
							this.getTeamList()
						} else {
							this.$u.toast(res.message)
						}
					})
				}
			},
			loadData(){
				return http.initData().then(res=>{
					// 活动阶段 0=未开始 1=组队期 2=任务期 3=任务期结束
					this.stage = res.data.config.stage
					// 用户未完成测试，进入点赞助力任务页面，需要提示“请先完成测试”，
					this.mbtiStatus = res.data.mbtiUser.mbtiStatus
					if(this.isShare && (this.mbtiStatus == 0 || this.mbtiStatus == 1) && this.stage != 3){
						this.csShow = true
					}
					if(this.stage == 3) {
						this.$refs.activityEnd.show()
					}
				})
			},
			confirm(){
				uni.redirectTo({
					url:'/pages/index?name=activeB&noload=true'
				})
			},
			getTeamList() {
				const params = {
					action: 'view',
					teamId: this.teamId
				}
				http.teamManage(params).then(res=>{
					this.mbtiTeam = res.data.mbtiTeam
					this.bl = Number(res.data.mbtiTeam.taskProgress)
					this.isVotePt = res.data.isVote
				})
			},
			getKj() {
				http.teamSpace({teamId: this.teamId}).then(res=>{
					this.kjDetail = res.data
				})
			},
			videoErrorCallback(e) {
			},
			playing() {
				this.$refs.bgMusic.stop()
			},
			goPh(){
				uni.redirectTo({
					url:'/pages/index?name=activeB&noload=true'
				});
			},
			goGc() {
				if (getCurrentPages().length >= 10) {//判断当前页面栈是否大于等于10.如果大于或等于就使用wx.redirectTo来跳转页面，清除当前页面栈
					uni.redirectTo({
						url:'/pages/activeB/square/index'
					});
				} else {
					uni.navigateTo({
						url:'/pages/activeB/square/index'
					});
				}
			},
			rightClick(){
				uni.navigateBack()
			},
			getType(taskKey) {
				const map = {
						tasks:1,
						work_1: 1,
						work_3: 1,
						work_5: 1,
						work_7: 1,
						work_9: 1,
						work_11: 1,
						work_12: 1,
						work_13: 1,
						work_18: 1,
						work_21: 1,
						work_22: 1,
						work_23: 1,
						work_4: 1,
						work_15: 1,
						work_10: 1,
						work_2: 1,
						work_24: 1,
						work_6: 2,
						work_8: 2,
						work_14: 2,
						work_16: 2,
						work_19: 2,
						work_25: 2,
						work_17: 3,
						work_20: 4
				}
				return map[taskKey];
			},
			goBottom(...e) {
			},
			preImage(res) {
				uni.previewImage({
					indicator:'number',
					urls: res,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.back_btn {
	position: absolute;
	width: 69rpx;
	height: 87rpx;
	left: 0%;
	top: 105rpx;
}
.go_btn {
	position: absolute;
	width: 259rpx;
	height: 67rpx;
	left: 470rpx;
	top: 725rpx;
	z-index: 10;
}
.showPh{
	position: absolute;
	width: 265rpx;
	height: 60rpx;
	left: 470rpx;
	top: 725rpx;
}
.goGc{
	position: absolute;
	width: 194rpx;
	height: 60rpx;
	left: 0rpx;
	top: 725rpx;
}
.dzBox {
	width: 700rpx;
	height: 120rpx;
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translate(-50%);
	z-index: 100;
}
.dzTxt {
	position: fixed;
	bottom: 50rpx;
	left: 200rpx;
	font-size: 48rpx;
	z-index: 1000;
}
.dz {
		width: 62rpx;
		height: 44rpx;
		position: fixed;
		bottom: 60rpx;
		left: 410rpx;
		z-index: 101;
		&:nth-child(2) {
			left: 490rpx;
		}
		&:nth-child(3) {
			left: 580rpx;
		}
	}
	.dzImage {
		width: 541rpx;
		height: 301rpx;
	}
	.tdName {
		width: 100%;
		font-size: 58rpx;
		padding: 0 50rpx;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: absolute;
		top: 95rpx;
		text-align: center;
	}
	.tdJd {
		font-size: 26rpx;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: absolute;
		top: 650rpx;
		left: 200rpx;
	}
	.tdDz {
		font-size: 26rpx;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: absolute;
		top: 650rpx;
		left: 390rpx;
	}
	.tdPm {
		font-size: 26rpx;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: absolute;
		top: 650rpx;
		left: 610rpx;
	}
.page{
	background-color: transparent;
	.square{
		width: 100%;
		.top-box {
			width: 100%;
			height: 380rpx;
			padding: 20rpx 35rpx;
			position: absolute;
			top: 200rpx;
		}
		.top-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: 0;
			justify-content: center;
			align-items: center;
		}
		.item-top {
			text-align: center;
			margin-bottom: 15rpx;
			margin-right: 16rpx;
			.item-tag {
				padding: 2rpx;
				border: 1px solid #181818;
				border-radius: 6rpx;
				background-color: #369eff;
				font-size: 18rpx;
				width: 63rpx;
				margin-right: 5rpx;
			}
			.item-tag1 {
				padding: 2rpx;
				border: 1px solid #181818;
				border-radius: 6rpx;
				background-color: #f1ee41;
				font-size: 18rpx;
				width: 73rpx;
			}
			.item-name {
				font-size: 18rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 120rpx;
				text-align: center;
			}
			.pImage{
				width: 80rpx;
				height: 80rpx;
				margin: 5rpx;
				border-radius: 50%;
			}
		}
		.bottom-box {
			width: 100%;
			height: 1050rpx;
			padding: 30rpx;
			position: absolute;
			top: 800rpx;
			font-size: 0;
			padding-bottom: 100rpx;
			.item-bottom{
				padding: 20rpx;
				box-shadow: 3rpx 10rpx 3rpx 2px rgba(0, 0, 0, 0.05);
				border-radius: 25rpx;
				margin: 30rpx;
			}
		.pImage{
			width: 185rpx;
			height: 185rpx;
			border-radius: 10rpx;
			margin: 1rpx;
    	border: 1rpx solid #ccc;
		}
		.item-name {
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
			text-align: left;
		}
		.item-time {
			font-size: 18rpx;
			color: #3b3b3b;
			text-align: left;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #ccc;
		}
		.item-msg {
			font-size: 28rpx;
			color: #888;
			text-align: left;
			margin: 10rpx 0;
			white-space: pre-line;
		}
		.item-video{
			width: 278rpx;
			height: 305rpx;
			border-radius: 10rpx;
			.my-video {
				width: 328rpx;
				height: 305rpx;
			}
		}
		}
	}
}
</style>